<template>
  <div class="main-content-bar">
    <div class="maincontent-bar-triangle-right"></div>
    <div class="main-content-bar-left">
      <img v-if="route === 0" src="@/assets/img/estores.jpeg" alt="" />
      <img v-else-if="route === 1" src="@/assets/img/orders.png" alt="" />
      <img v-else-if="route === 2" src="@/assets/img/products.png" alt="" />
    </div>
    <div class="main-content-bar-right" :class="{ unLoading: edit }">
      <div>
        <template>
          <a href="javascript:;" v-if="!route && !edit"  @click="toProducts()">
            <span>
              {{ pageConfig[0] + "：" }}
            </span>
            <template v-if="!edit">
              {{ barName }}
              <i class="el-icon-arrow-right"></i>
            </template>
            <el-input v-else v-model="barName"></el-input>
          </a>
          <template v-else>
            <span>
              {{ pageConfig[0] + "：" }}
            </span>
            <template v-if="!edit">
              {{ barName }}
            </template>
            <el-input v-else v-model="barName"></el-input>
          </template>
        </template>
      </div>
      <div>
        <span>
          {{ pageConfig[1] + "：" }}
        </span>
        <template v-if="!edit">
          {{ info[0] }}
        </template>
        <el-input v-else v-model="info[0]"></el-input>
      </div>
      <div>
        <span>
          {{ pageConfig[2] + "：" }}
        </span>
        <template v-if="!edit">
          {{ info[1] }}
        </template>
        <el-input v-else v-model="info[1]"></el-input>
      </div>
      <div class="main-content-bar-edit">
        <span v-if="!edit" @click="openEdit()" class="el-icon-edit-outline">
        </span>
        <span v-if="!edit" class="el-icon-delete"></span>
        <span v-if="edit" @click="closeEdit()" class="el-icon-close"></span>
        <span v-if="edit" class="el-icon-check"></span>
      </div>
    </div>
  </div>
</template>

<script>
import global from "@/components/Global";
export default {
  props: ["barName", "info", "pageConfig", "route", "code"],
  data() {
    return {
      tempId: "",
      tempInfo: [],
      edit: false,
    };
  },
  methods: {
    openEdit() {
      this.edit = true;
      this.$store.state.nowLoading = true;
    },
    closeEdit() {
      this.edit = false;
    },
    toProducts() {
      global.toProducts(this);
    }
  },
  watch: {
    "$store.state.nowLoading": function (val) {
      if (val === false) this.closeEdit();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global";
.main-content-bar {
  width: 800px;
  height: 125px;
  margin: 3% 0;
  padding-left: 25px;
  border-left: $theme 1px solid;
  position: relative;
  @include clearfix;
  .main-content-bar-left {
    float: left;
    width: 200px;
    height: 125px;
    margin-right: 25px;
    text-align: center;
    img {
      display: inline-block;
      height: 100%;
      margin: 0 auto;
    }
  }
  .main-content-bar-right {
    position: relative;
    float: left;
    font-size: x-large;
    width: 65%;
    :not(:first-child):not(:last-child) {
      font-size: medium;
      color: #666;
      margin-top: 4%;
    }
    .el-input {
      width: 55%;
    }
    ::v-deep .el-input__inner {
      height: 25px;
      line-height: 25px;
      padding-left: 5px;
    }
    div:first-child a {
      @include goodA;
      color: black;
      i {
        font-size: large;
        font-weight: bold;
      }
    }
    .main-content-bar-edit {
      position: absolute;
      right: 0;
      top: 45%;
      span {
        margin-left: 25px;
        font-size: xx-large;
        cursor: pointer;
        color: $theme;
      }
      span:hover {
        font-weight: bolder;
      }
    }
  }
  .maincontent-bar-triangle-right {
    @include triangle-right;
    position: absolute;
    left: 0;
    top: 50px;
  }
}
.unLoading {
  z-index: 2600;
}
</style>